<template>
  <view class="powerbank-info">
    <view class="goBack" @click="goBack" :style="{height: `${globalData.navBarHeight}px`}">
      <image src="../../static/images/goBack.png" mode=""></image>
    </view>
    <view class="swiperInfo">
      <view class="swiper-wrapper">
        <swiper class="swiper-box" circular="true" indicator-dots="true" indicator-color="#838383"
          indicator-active-color="#105BDE">
          <swiper-item v-for="(item, index) in swipeData" :key="index " class="swiper-item">
            <image :src="item.url" mode=""></image>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="powerbank-detail">
      <view class="powerbank-detail-name">
        <p>天虹购物商场 (相城店)</p>
        <text>相城大道天虹商场负一楼最北侧</text>
      </view>
      <view class="powerbank-detail-rule">
        <p>计费规则</p>
        <text>3分钟内归还免费，2元/30分钟，28元/24小时，总封顶99元</text>
      </view>
      <view class="powerbank-detail-type">
        <p>适配所有手机型号</p>
        <view class="mobile-type">
          <view class="mobile-type-info">
            <image src="@/static/images/ios@2x.png" mode=""></image> <span>iOS</span>
          </view>
          <view class="mobile-type-info">
            <image src="@/static/images/Android@2x.png" mode=""></image> <span>Android</span>
          </view>
          <view class="mobile-type-info">
            <image src="@/static/images/type C@2x.png" mode=""></image> <span>Type C</span>
          </view>
        </view>
        <!-- <text>3分钟内归还免费，2元/30分钟，28元/24小时，总封顶99元</text> -->
      </view>
<!--      <view class="contract">
        点击租借即视为同意<text>《用户协议》</text>及<text>《隐私政策》</text>
      </view> -->
      <view class="powerbank-detail-btn">
        <!--             <van-button plain color="#105BDE"
          type="info" class="pay-deposit">
          缴纳押金
        </van-button> -->
        <van-button class="lend" color="linear-gradient(#0366E0, #1E50DC)" type="info">
          <!--          <view class="deposit-info">
            <h2>免押金租借</h2>
            <p>（微信支付分450分及以上可免押借宝）</p>
          </view> -->
          <view class="begin-to-start">
            开始使用
          </view>
        </van-button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        globalData: {
          navBarHeight: 0, // 导航栏高度
          menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
          menuTop: 0, // 胶囊距底部间距（保持底部间距一致）
          menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
        },
        swipeData: [{
            url: require('@/static/images/swipe-image.png')
          },
          {
            url: require('@/static/images/swipe-image.png')
          },
          {
            url: require('@/static/images/swipe-image.png')
          },
        ]
      }
    },
    onLoad() {
      this.getInitLogoHeight()
    },
    methods: {
      getInitLogoHeight() {
        const that = this;
        // 获取系统信息
        const systemInfo = wx.getSystemInfoSync();
        // 胶囊按钮位置信息
        const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
        // 导航栏高度 = 状态栏高度 + 44
        that.globalData.navBarHeight = systemInfo.statusBarHeight + 44;
        that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
        that.globalData.menuTop = menuButtonInfo.top;
        that.globalData.menuHeight = menuButtonInfo.height;
      },
      goBack() {
        uni.navigateBack()
      }
    }
  }
</script>

<style lang="less" scoped>
  .powerbank-info {
    .goBack {
      z-index: 99;
      position: fixed;
      display: flex;
      align-items: flex-end;
      padding-left: 15px;
      padding-bottom: 8px;
      box-sizing: border-box;

      image {
        width: 32px;
        height: 32px;
        object-fit: contain;
      }
    }

    .swiperInfo {
      width: 100%;
      height: 445px;
      box-sizing: border-box;
      padding: 0 18px 0 14px;
      background: linear-gradient(#FFFFFF, #F6F6F6);

      .swiper-wrapper {
        height: 100%;

        .swiper-box {
          height: 445px;

          .swiper-item {
            display: flex;

            image {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
        }
      }
    }

    .powerbank-detail {
      margin: 20px 0 0;
      padding-left: 16px;
      padding-bottom: 33px;

      .powerbank-detail-name,
      .powerbank-detail-rule,
      .powerbank-detail-type {
        margin-bottom: 30px;

        p {
          font-weight: 700;
          font-family: 'PingFang-SC-Bold';
          font-size: 16px;
          margin-bottom: 5px;
          color: #222222;
        }

        text {
          font-size: 13px;
          color: #555555;
        }

        .mobile-type {
          margin-top: 16px;
          display: flex;

          .mobile-type-info {
            display: flex;
            align-items: center;
            margin-right: 38px;

            image {
              width: 24px;
              height: 24px;
            }

            span {
              margin-left: 5px;
              color: #4D4D4D;
              font-size: 14px;
            }
          }
        }
      }

      .contract {
        text-align: center;
        margin-top: 54px;
        font-size: 12px;
        color: #999999;

        text {
          color: #0262CD;
        }
      }

      .powerbank-detail-btn {
        display: flex;
        padding-right: 15px;
        margin-top: 12px;

        .deposit-info {
          h2 {
            font-size: 16px;
          }

          p {
            font-size: 11px;
          }
        }

        .lend {
          flex: 1;
        }

        .pay-deposit {
          margin-right: 10px;
        }

        .begin-to-start {
          font-size: 16px;
        }

        ::v-deep .van-button {
          width: 100%;
          border-radius: 10px;
          height: 50px;
        }
      }
    }
  }
</style>